<template>
	<view class="main">
		<view class="com_top">
			集齐藏品合成限定藏品
		</view>
		<view class="com_con">
			<view class="con_time">合成剩余时间 : <u-count-down :time="djs" format="HH:mm:ss"
					style="margin-left:15px;line-height:27px;color:#fff"></u-count-down>
			</view>
			<view class="con_img">
				<image src="../../static/images/comimg/kuang.png"></image>
				<image :src="cominfoobj.special_info.thumb||''"></image>
			</view>
		</view>
		<view class="com_g">
			<view class="g1"></view>
			<view class="g2">
				{{cominfoobj.special_info.title}}
			</view>
			<view class="g1"></view>
		</view>
		<view class="xl">
			<view class="xl1">限量</view>
			<view class="xl2">{{cominfoobj.special_info.all_count}}份</view>
			<view class="xl3">剩余{{cominfoobj.special_info.all_count-cominfoobj.special_info.sale_count}}份</view>
		</view>
		<view class="com_main">
			<view class="main_title" @click="showcang">
				添加材料合成藏品
			</view>
			<view class="main_main">
				<view class="title">
					合成所需藏品
				</view>
				<view class="main_bot">
					<view class="main_item" v-for="(item,i) in cominforule" :key="i">
						<image :src="item.thumb||''" mode=""></image>
						<view class="item_title">{{item.title}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="con_bottom">
			<view class="bottom_title">
				合成说明
			</view>
			<view class="bottom_item">
				1,使用5款指定藏品可合成限定藏品，合成后原有藏品将自动销毁，同一款头像有多张也算有效；
			</view>
			<view class="bottom_item">
				2、稀有藏品限量4000份，每位用户仅限合成一次，合成完为止。
			</view>
		</view>
		<u-popup :show="show2" mode="center" closeOnClickOverlay @close="close">
			<view class="com_com">
				<view class="com_title1">恭喜你获得</view>
				<view class="com_title2">{{cominfoobj.special_info.title}}</view>
				<view class="com_img">
					<image src="../../static/images/comimg/kuang.png"></image>
					<image :src="cominfoobj.special_info.thumb"></image>
				</view>
				<view class="com_but" @click="show2==false">
					完成
				</view>

			</view>
			<view class="close" @click="show2=false">
				<image src="../../static/images/comimg/close.png"></image>
			</view>
		</u-popup>
		<u-popup :show="show" mode="center" closeOnClickOverlay @close="close">
			<view class="choose_box1">
				<view class="title">合成所需材料</view>
				<view class="tip">
					普通头像 : <span> {{hc.mz_count}}/{{hc.all_mz_count}} </span>
				</view>
				<view class="shop_list">
					<view class="shop_item" v-for="(item,i) in hcmy_synthes">
						<image :src="item.thumb"></image>
						<view class="shop_t">{{item.title}}</view>
					</view>
					<block v-if="hcmy_synthes.length<1">
						<Empty text="无可用材料" mode="data"></Empty>
					</block>

				</view>
				<view class="main_title" @click="comshop">
					选择藏品合成
				</view>
			</view>
			<view class="close" @click="show=false">
				<image src="../../static/images/comimg/close.png"></image>
			</view>
		</u-popup>
		<u-popup :show="show1" mode="center" closeOnClickOverlay @close="close">
			<view class="choose_box">
				<view class="title">选择藏品</view>
				<view class="cang_list">
					<view class="cang_item" @click="chooseCang(index)" v-for="(item,index) in list" :key="index">
						<image class="checkimg" src="@/static/images/comimg/check2.png" v-if="item.checkimg"></image>
						<image class="checkimg" src="@/static/images/comimg/check1.png" v-else></image>
						<image class="cang_img" :src="item.thumb"></image>
						<view class="cang_t">{{item.title}}</view>
					</view>
				</view>
				<view class="main_title" @click="confimcom">
					确认合成
				</view>
			</view>
		</u-popup>
	</view>

</template>

<script>
	import Empty from "@/components/Empty.vue"
	import {
		mixin
	} from '@/Mixins/mixin.js'
	export default {
		components: {
			Empty
		},
		mixins: [mixin],
		data() {
			return {

				id: null,
				hcmy_synthes: [],
				hc: {},
				djs: 0,
				cominforule: [],
				cominfoobj: {},
				img: '../../static/images/comimg/check1.png',
				img1: '../../static/images/comimg/check2.png',
				show: false,
				show1: false,
				show2: false,
				title: '',
				list: []
			}
		},
		computed: {},
		onReady() {},
		onShow() {},
		onLoad(e) {
			if (e.id) {
				this.id = e.id;
				this.getInfo(this.id)
			} else {
				// uni.navigateTo({
				// 	url:'../Mine/index'
				// })
				return false;
			}
		},
		methods: {

			chooseCang(index) {
				this.list[index].checkimg = !this.list[index].checkimg;
				console.log(this.list[index]);
				this.$forceUpdate()
				// console.log(index,this.list[index].checkimg,this.list);
			},
			async confimcom() {
				var special_id = [];
				this.list.map((el) => {
					if (el.checkimg == true) {
						special_id.push(el.id);
						console.log(el.id);
					}
				})
				special_id = special_id.join(',')
				console.log(special_id);
				this.loading = true;
				let data = await this.$http({
					url: this.$api.comactive,
					method: 'POST',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.id,
						special_ids: special_id,
					}
				})
				this.loading = false;
				if (data.code == 200) {
					this.show1 = false;
					this.show2 = true;
					console.log('合成成功')
				}
			},
			comshop() {
				if (this.hc.mz_count == this.hc.all_mz_count) {
					this.show = false;
					this.show1 = true;
					this.list = this.hcmy_synthes;
					for (var i = 0; i < this.list.length; i++) {
						this.list[i].checkimg = false;
					}
					console.log(this.list);
				} else {
					uni.$u.toast('不符合合成条件!');
					return false;
				}
			},
			async showcang() {
				this.show = true;
				let data = await this.$http({
					url: this.$api.lookcom,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: this.id
					}
				})
				if (data.code == 200) {
					this.hc = data.data;
					this.hcmy_synthes = JSON.parse(data.data.my_synthes);
					console.log(this.hcmy_synthes);
				}
				console.log('点击添加合成藏品', data)
			},
			close() {
				this.show = false;
			},
			showair() {

			},
			async getInfo(id) {
				let data = await this.$http({
					url: this.$api.cominfo,
					method: 'GET',
					hideLoading: true,
					needToken: true,
					data: {
						id: id
					}
				})
				console.log('[合成詳情]', data)
				if (data.code == 200) {
					this.cominfoobj = data.data;
					this.cominforule = JSON.parse(data.data.rule);
					console.log(this.cominforule);
					// this.djs=data.data.end_time.getTime()-data.data.end_time.getTime()
					const now = +new Date().getTime();
					var end = Date.parse(data.data.end_time);
					// var start = Date.parse(data.data.start_time);
					// const end=data.data.end_time.getTime();
					// console.log(now,end);
					// if(end>now){
					// 	this.djs=end-now;
					// }else{
					// 	this.djs='0';
					// 	console.log(111);
					// }
					this.djs = end - now;
				} else {
					// console.log(data.msg);
					uni.$u.toast(data.msg);
					setTimeout((el) => {
						uni.switchTab({
							url: '/pages/Index/index'
						});
					}, 3000)

					// uni.navigateTo({
					// 	url:'pages/Index/index'
					// })
					// this.$refs.uToast.show({
					// 	message:data.msg,	
					// })
				}
			},
		},

	}
</script>

<style lang="scss" scoped>
	.main {
		width: 100%;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		min-height: 100vh;
		box-sizing: border-box;
		background-color: $nft-bg-color;

		/deep/.u-popup__content[data-v-52d4ddd1] {
			background-color: transparent !important;
		}

		/deep/.u-count-down__text[data-v-072523e7] {
			color: #fff;
		}

		/deep/ .empty[data-v-9ec67afc] {
			text-align: center;
			padding: 50px 0;
			color: #ACADAD;
			font-size: 13px;
			margin: 0 auto;
		}

		.com_top {
			box-sizing: border-box;
			padding: 0 30rpx;
			width: 100%;
			height: 119rpx;
			background: linear-gradient(96deg, #231737 0%, #2D3D64 52%, #261934 100%);
			border-top: 4rpx solid #936431;
			border-bottom: 4rpx solid #936431;
			line-height: 119rpx;
			text-align: center;
			font-size: 46rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			color: #FEFED8;

		}

		.com_con {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 59rpx;
			padding: 0 30rpx;

			.con_time {
				width: 437rpx;
				height: 55rpx;
				background: #000000;
				opacity: 0.83;
				border-radius: 10rpx;
				text-align: center;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 55rpx;
				display: flex;

			}

			.con_img {
				position: relative;

				// z-index: 999;
				image:nth-child(1) {
					// background:url(../../static/images/comimg/tou.jpg) center center;
					// position:relative;
					width: 674rpx;
					height: 697rpx;
					z-index: 1;

				}

				image:nth-child(2) {
					// background:url(../../static/images/comimg/tou.jpg) center center;
					position: absolute;
					top: 90rpx;
					left: 71rpx;
					width: 530rpx;
					height: 530rpx;


				}

			}
		}

		.com_g {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			margin-bottom: 62rpx;

			.g1 {
				width: 141rpx;
				height: 3rpx;
				background-image: url(../../static/images/comimg/xian.png);
			}

			.g2 {
				width: 441rpx;
				height: 118rpx;
				text-align: center;
				line-height: 118rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #F5E8AE;
				background-image: url(../../static/images/comimg/bian.png);
				// width:196rpx;
				// height:191rpx;
				background-size: 441rpx 118rpx;
			}
		}

		.xl {
			display: flex;
			align-items: center;
			justify-content: center;

			.xl1 {
				width: 74rpx;
				height: 48rpx;
				background: linear-gradient(89deg, #EBCD7E 0%, #EFC063 100%);
				border-radius: 4rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #453822;
				line-height: 48rpx;
				text-align: center;
			}

			.xl2 {
				width: 120rpx;
				height: 48rpx;
				background: #4C4C4C;
				border-radius: 4rpx;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 48rpx;
				text-align: center;
			}

			.xl3 {
				width: 203rpx;
				height: 48rpx;
				border: 2rpx solid #EFC166;
				border-radius: 4rpx;
				line-height: 48rpx;
				text-align: center;
				margin-left: 15rpx;
				font-size: 28rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #EEC066;
			}
		}

		.com_main {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 52rpx;
			padding: 0 52rpx;
			box-sizing: border-box;

			// border:1px solid red;
			.main_title {
				width: 445rpx;
				height: 106rpx;
				background: linear-gradient(89deg, #E5C377 0%, #CFA65E 100%);
				border: 8rpx solid linear-gradient(0deg, #A1703C, #FDF7A2) 8 8;
				// border-image: linear-gradient(0deg, #A1703C, #FDF7A2) 8 8;
				border-radius: 53rpx;
				line-height: 106rpx;
				text-align: center;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #6D2D0F;
			}

			.main_main {
				background: #111321;
				border: 2rpx solid #CFA65E;
				border-radius: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-top: 44rpx;
				width: 723rpx;

				.title {
					font-size: 36rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #FFFFFF;
					background: #1B2932;
					width: 100%;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 40rpx 40rpx 0 0;
				}

				.main_bot {
					margin-top: 44rpx;
					margin-bottom: 44rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: left;
					// padding:0 28rpx;
					// align-items: center;
					box-sizing: border-box;
					flex-wrap: wrap;
					// width: 100%;
					width: 723rpx;

					// border:1px solid #007AFF;
					.main_item {
						display: flex;
						flex-direction: column;
						width: 240rpx;
						box-sizing: border-box;
						padding: 0 20rpx;
						margin-bottom: 20rpx;

						// border:1px solid blue;
						image {
							width: 200rpx;
							height: 204rpx;
							background: #CFA65E;
							border-radius: 10px;

						}

						.item_title {
							font-size: 28rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: #CFA65E;
							text-align: left;
							display: flex;
							align-items: left;
							justify-content: left;
							margin-top: 22rpx;
						}

					}

					.main_item:nth-child(3n) {
						margin-right: 0px;
					}
				}
			}
		}

		.con_bottom {
			padding: 0 30rpx;
			color: #fff;
			font-size: 36rpx;
			font-family: Microsoft YaHei;
			font-weight: 400;
			line-height: 60rpx;
			margin-bottom: 43rpx;

			.bottom_title {
				text-align: center;
				margin-top: 63rpx;
			}

			.bottom_item {
				font-size: 30rpx;
			}
		}

		.choose_box {
			border-radius: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 700rpx;
			background: #151725;
			border: 2rpx solid #DBBE7D;
			box-sizing: border-box;
			margin: 0 30rpx;
			box-sizing: border-box;


			.title {
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #D0D1AD;
				background: #1B2932;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 40rpx 40rpx 0 0;
				margin-bottom: 10rpx;
			}

			.cang_list {
				display: flex;
				flex-wrap: wrap;
				box-sizing: border-box;
				// padding:30rpx 10rpx;
				margin: 0 auto;

				.cang_item {
					width: 151rpx;
					height: 239rpx;
					// border:1px solid #000;
					position: relative;
					margin: 10rpx 10rpx;

					.checkimg {
						width: 65rpx;
						height: 57rpx;

						position: absolute;
						right: 0;
						top: 0;
						z-index: 1;
					}

					.cang_img {
						width: 122rpx;
						height: 121rpx;
						margin-top: 28rpx;
					}

					.cang_t {
						font-size: 38rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 29rpx;
						margin-top: 19rpx;
					}

				}
			}

			.main_title {
				width: 445rpx;
				height: 106rpx;
				background: linear-gradient(89deg, #F7D29A 0%, #FCC467 100%);
				border-radius: 53rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #6D2D0F;
				line-height: 106rpx;
				text-align: center;
				margin: 20rpx 0;
			}
		}

		.close {
			width: 64rpx;
			height: 65rpx;

			margin: 0 auto;
			margin-top: 46rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.com_com {
			display: flex;
			flex-direction: column;
			align-items: center;

			height: 831rpx;
			background: #151725;
			border: 2rpx solid #DBBE7D;
			border-radius: 40px;
			box-sizing: border-box;
			padding: 77rpx 0 0 0;
			width: calc(100%-60rpx);
			width: 700rpx;

			.com_title1 {
				font-size: 38rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ECCBAB;

			}

			.com_title2 {
				font-size: 56rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #ECCBAB;



			}

			.com_img {
				// height: 385rpx;
				position: relative;
				margin: 36rpx auto;

				// z-index: 999;
				image:nth-child(1) {

					width: 372rpx;
					height: 385rpx;
					z-index: 1;

				}

				image:nth-child(2) {
					position: absolute;
					top: 47rpx;
					left: 41rpx;
					width: 300rpx;
					height: 300rpx;


				}
			}

			.com_but {
				width: 445rpx;
				height: 106rpx;
				background: linear-gradient(89deg, #F7D29A 0%, #FCC467 100%);
				border-radius: 53rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #6D2D0F;
				line-height: 106rpx;
				text-align: center;

			}

			.close {


				width: 64rpx;
				height: 65rpx;

				margin: 0 auto;
				margin-top: 46rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.choose_box1 {
			border-radius: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 700rpx;
			// height: 831rpx;
			background: #151725;
			border: 2rpx solid #DBBE7D;
			box-sizing: border-box;
			margin: 0 35rpx;
			box-sizing: border-box;


			.title {
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #D0D1AD;
				background: #1B2932;
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				border-radius: 40rpx 40rpx 0 0;
			}

			.tip {
				text-align: center;
				font-size: 32rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 18px;

				span {
					color: #DBBE7D;
					padding-left: 20rpx;
				}

			}

			.shop_list {
				display: flex;
				align-items: center;
				// justify-content:center;
				flex-wrap: wrap;
				width: 100%;
				box-sizing: border-box;
				// padding:33rpx;
				margin: 0px auto;
				width: calc(100% - 132rpx);

				.shop_item {
					margin: 20rpx 0;
					margin-right: 20rpx;

					image {
						width: 122rpx;
						height: 122rpx;

					}

					.shop_t {
						font-size: 24rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #FFFFFF;
					}
				}

				.shop_item:nth-child(4n) {
					margin: 0px;
				}

			}

			.main_title {
				width: 445rpx;
				height: 106rpx;
				background: linear-gradient(89deg, #F7D29A 0%, #FCC467 100%);
				border-radius: 53rpx;
				font-size: 36rpx;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #6D2D0F;
				line-height: 106rpx;
				text-align: center;
				margin-bottom: 20rpx;
			}
		}
	}
</style>
